<template>
    <div>
        <Card dis-hover class="RankingCard ">
            <p slot="title">
                <span> <img width="19px" src="../../static/image/排行 (1).png" alt=""></span>
                <font color="#80848f" size="4.5"> 本月电影排行</font>
            </p>
            <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
                更多>>
            </a>
            <div class="">
                <ul class="rank-list">
                    <li v-for="(item,key) in movieList" class="rank-li" style="margin-top:12px;margin-left:30px;">
                        <p v-bind:class="{'no1':key==0,'no2':key==1,'no3':key==2,'no4':key==3,'num':key>3}">

                            {{key+1}}</p>
                        <a :href="item.url" target="_blank" class="aname">{{ item.mName }}</a>

                    </li>
                </ul>
            </div>
        </Card>
    </div>
</template>
<script>
export default {
  data() {
    return {
      movieList: [
        
      ],
      randomMovieList: []
    };
  },
  methods: {
    queryMonthRanking() {
      this.$api
        .queryMonthRanking()
        .then(data => {
          this.movieList = data.data;
        })
        .catch(error => {
          console.log(error);
          this.$Message.info(error);
        });
    },
    changeLimit() {
      function getArrayItems(arr, num) {
        const temp_array = [];
        for (let index in arr) {
          temp_array.push(arr[index]);
        }
        const return_array = [];
        for (let i = 0; i < num; i++) {
          if (temp_array.length > 0) {
            const arrIndex = Math.floor(Math.random() * temp_array.length);
            return_array[i] = temp_array[arrIndex];
            temp_array.splice(arrIndex, 1);
          } else {
            break;
          }
        }
        return return_array;
      }
      this.randomMovieList = getArrayItems(this.movieList, 5);
    }
  },
  created() {
    this.queryMonthRanking();
  },
  mounted() {
    this.changeLimit();
  }
};
</script>

<style scoped>
@import "../../static/css/Cards.scss";

.fonts {
  font-size: 50px;
}
.ba {
  background: #ff9900;
}
</style>